<template>
    <div class="fromRfq">
        <el-dialog v-model="open" @close="closeInfo" width="78%" align="center"
            style="position: relative;background-color: #f1f1f1;" draggable>
            <div class="pdbo f20 w100p flex">
                <p>Order From RFQ</p>
            </div>
            <div class="pdbo w100p flex jc-sb">
                <div class="copybox">
                    <div class=" flex jc-sb height">
                        <div class=" flex fdc">
                            <!-- <el-select v-model="rfqID" :remote-method="searchrfq" remote remote-show-suffix
                                @change="getrfqDetail" filterable>
                                <el-option v-for="item in rfqidList" :key="item.order_id" :label="item.label"
                                    :value="item.id" />
                            </el-select> -->
                            <el-input v-model="rfqID" @input="searchrfq" @clear="() => { emits('clearRfq') }" clearable
                                placeholder="Enter rfq ID" />
                            <p class="flex">Add model to order </p>
                        </div>
                        <el-button @click="rfqAdd" type="success"
                            style="border-color:#6193D2;background-color: #E3E5FF;color: #6193D2;">Add</el-button>
                    </div>
                    <el-table :data="rfqProductList" @selection-change="SelectionMethod"
                        v-el-table-infinite-scroll="() => { emits('getrfqProductList1') }" height="400" style="width:100%;">
                        <el-table-column type="selection" width="30" />
                        <el-table-column fixed prop="product_name_pi" label="MODEL" width="180" />
                        <el-table-column prop="Brand_name" label="BRAND" width="100" />
                        <el-table-column prop="inquiry_id" label="ID" width="80" />
                        <el-table-column align="center" prop="quantity" label="QTY" width="100" />
                        <el-table-column prop="price" label="Price" width="80" />
                        <el-table-column prop="weight" label="Wight" width="80" />
                        <el-table-column prop="leadingtime" label="LEADING" width="100" />
                        <el-table-column prop="product_condition" label="CONDITION" width="120" />
                    </el-table>
                </div>
                <div class="copybox">
                    <div class="flex jc-sb height">
                        <div>
                            <el-button @click="rfqnewOrder" type="primary" style="background-color: #6193D2;">New
                                Order</el-button>
                            <el-button @click="rfqSave">Save</el-button>
                        </div>
                        <el-select disabled v-model="orderName" @change="() => { take(orderName) }" :remote-method="search"
                            remote remote-show-suffix filterable>
                            <el-option v-for="item in orderidList" :key="item.order_id" :label="item.PI_name"
                                :value="item.PI_name" />
                        </el-select>
                    </div>
                    <el-table :data="rfqnewList" height="400" style="width: 100%;">
                        <el-table-column fixed prop="product_name_pi" label="MODEL" width="170" />
                        <el-table-column prop="Brand_name" label="BRAND" width="100" />
                        <el-table-column align="center" prop="quantity" label="QTY" width="100" />
                        <el-table-column prop="price" label="Price" width="80" />
                        <el-table-column prop="weight" label="Wight" width="80" />
                        <el-table-column prop="leadingtime" label="LEADING" width="100" />
                        <el-table-column prop="product_condition" label="CONDITION" width="120" />
                        <el-table-column label="OPERATION" width="120">
                            <template v-slot="operation">
                                <el-button type="danger" @click="() => { emits('deleteSolo', operation, 'rfq') }"
                                    style="width: 60%;background-color:#6193D2;color: #ffffff;border: none;">Delete</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
  
<script  setup>
import { ref } from 'vue'
const emits = defineEmits(['closeInfo','clearRfq', 'getrfqProductList1', 'deleteSolo', 'getOrderid', 'getrfqProductList', 'SelectionMethod', 'rfqAdd', 'rfqSave', 'rfqnewOrder'])
const props = defineProps({
    orderidList: Object,
    orderTitle: String,
    order_id: Number,
    rfqProductList: Object,
    rfqnewList: Object
})
const open = ref(false)
const orderID = ref('')
const rfqID = ref('')
const orderName = ref('')
const dialogopen = () => {
    open.value = true
    orderID.value = props.order_id
    orderName.value = props.orderTitle
}
const closeInfo = () => {
    emits('closeInfo', 2)
}
// 右侧值更改后 更改id
const take = (orderName) => {
    orderID.value = props.orderidList.filter(item => item.PI_name === orderName)[0].order_id
}
const searchrfq = (val) => {
    emits('getrfqProductList', val)
}
// 搜索订单id列表
const search = (id) => {
    emits('getOrderid', id)
}
// 复选框
const SelectionMethod = (val) => {
    emits('SelectionMethod', val)
}
// add
const rfqAdd = () => {
    emits('rfqAdd')
}
// 保存
const rfqSave = () => {
    emits('rfqSave', orderID.value)
}
// 新建订单
const rfqnewOrder = () => {
    emits('rfqnewOrder')
}

defineExpose(
    {
        open,
        rfqID,
        dialogopen
    }
)
</script>
<style lang="less">
.fromRfq {
    .pdbo {
        padding: 10px;

        .copybox {
            width: 49.8%;
            padding: 10px;
            background-color: #ffffff;
            border-radius: 20px;

            .copyleft {
                justify-content: start;
            }

            .height {
                height: 50px;
            }
        }
    }
}
</style>